<template>
  <!--坐席安排-->
  <view class="main_section">

    <view class="title_section">
      <view class="title">坐席安排</view>
    </view>

    <view class="section_1">
      <view class="btn_section" v-if="meetingList.length < 1">
        暂无更多...
      </view>

      <view class="ul" v-else>
        <view class="li" v-for="(v,k) in meetingList" :key="k" >
          <view class="title">{{ v.title }}</view>
          <image v-for="(v2,k2) in v.seat_image" :key="k2" class="pic" mode="aspectFill"  @click="openGallery($util.img(v2))"
                 :src="$util.img(v2)"></image>
        </view>
      </view>
    </view>

    <!--    图片预览组件-->
    <fui-gallery :urls="img_urls" :show="img_show" @hide="hideGallery"></fui-gallery>

  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

export default {
  data() {
    return {
      meetingSubjectId:'',//会议主题id

      meetingList:[],//会议子表信息

      img_urls: [],
      img_show: false
    }
  },
  onLoad(options) {
    if (options.meetingSubjectId) {
      this.meetingSubjectId = options.meetingSubjectId
    }
  },
  onShow() {
    this.init()
  },
  methods: {
    async init() {
      //获取会议子表信息
      await this.getSeatImageList()
    },

    //获取会议子表信息
    async getSeatImageList(){
      let params = {
        meeting_subject_id:this.meetingSubjectId
      }
      let res = await apiRoute.getSeatImageList(params)
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.meetingList = res.data
      console.log(123123,this.meetingList)
    },

    // 图片预览
    openGallery(img_url) {
      this.img_urls = [{
        src: img_url
      }]
      this.img_show = true
    },
    // 隐藏图片预览
    hideGallery() {
      this.img_show = false
      this.img_urls = []
    },


  }
}
</script>

<style lang="less" scoped>
.main_section{
  padding: 20rpx;
  padding-bottom: 40rpx;

  .title_section{
    .title{
      font-size: 40rpx;
      color: #2a82e4;
    }
  }

  .section_1{
    .btn_section{
      width: 100%;
      margin-top: 30rpx;
      text-align: center;
      font-size: 35rpx;
    }
    .ul{
      margin-top: 30rpx;

      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .li{
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        gap: 15rpx;
        .title{
          font-size: 35rpx;
          color: #2a82e4;
        }
        .pic{
          width: 100%;
          margin-top: 10px;
        }
      }
    }
  }

}
</style>
